<template>
  <div class="employees">
    <el-card class="top">
      <!-- v-if="$store.state.user.userinfo.roles.points.includes('employees_export')" -->
      <el-button
        v-buttonPermissison:inlineBolck="'employees_export'"
        type="primary"
        @click="exportEvent"
      >导出</el-button>
      <el-button
        v-buttonPermissison:inlineBolck="'employees_import'"
        type="primary"
        @click="uploadEvend"
      >{{ $t('route.import') }}</el-button>
      <el-button type="primary" @click="addEmployee">+新增员工</el-button>
    </el-card>
    <el-card>
      <el-table :data="list">
        <el-table-column label="序号">
          <template v-slot="{ $index }">
            {{ (page.page - 1) * page.size + $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="姓名" prop="username" sortable />
        <!-- 点击图片生成二维码 -->
        <el-table-column label="图片" prop="username" sortable>
          <template v-slot="{ row }">
            <img
              v-Imageerror="defaultImg"
              :src="row.staffPhoto"
              alt=""
              class="avatar"
              @click="creatCcode(row.staffPhoto)"
            >
          </template>
        </el-table-column>
        <el-table-column label="手机号" prop="mobile" sortable />
        <el-table-column label="工号" prop="workNumber" sortable />
        <!-- <el-table-column
          label="聘用形式"
          prop="formOfEmployment"
          sortable
          :formatter="formatter"
        /> -->
        <!-- 使用过滤器格式化数据 -->
        <!-- <el-table-column label="聘用形式">
          <template v-slot="{row}">
            {{ row.formOfEmployment |formOfEmployment }}
          </template>
        </el-table-column> -->
        <el-table-column label="聘用形式" prop="formOfEmployment" sortable />
        <!-- 使用自定义指令过滤数据 -->
        <!-- <el-table-column  label="聘">

        </el-table-column> -->
        <!-- <el-table-column label="状态" sortable>
          <template v-slot="{row}">
            <div v-enablestate="row.enableState" />
          </template>
        </el-table-column> -->
        <el-table-column label="状态" prop="enableState" sortable />
        <el-table-column label="入职时间" prop="timeOfEntry" sortable />
        <el-table-column label="转正时间" prop="correctionTime" sortable />

        <!-- <el-table-column label="入职时间" sortable>
          <template v-slot="{row}">
            <div v-formDate="row.timeOfEntry" />
          </template>
        </el-table-column> -->
        <!-- 自定义指令转换时间格式---全局自定义 -->
        <!-- <el-table-column label="转正时间" prop="correctionTime" sortable>
          <template v-slot="{row}">
            <div v-formDate="row.correctionTime" />
          </template>
        </el-table-column> -->
        <el-table-column label="操作" width="300" fixed="right">
          <template v-slot="{ row }">
            <el-button type="text" @click="toDetail(row.id)">查看</el-button>
            <el-button type="text">转正</el-button>
            <el-button type="text">调岗</el-button>
            <el-button type="text">离职</el-button>
            <el-button type="text" @click="role(row)">角色</el-button>
            <el-button type="text" @click="del(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          :total="page.total"
          :page-sizes="[1, 5, 10, 20]"
          :page-size="page.size"
          :current-page="page.page"
          layout="total,sizes,prev,pager,next,jumper"
          @size-change="sizeChange"
          @current-change="pageChange"
        />
      </div>
    </el-card>
    <!-- 新增弹框 -->
    <Dialog ref="add" />
    <!-- 生成二维码弹框 -->
    <!-- el-dialog内的默认插槽在第一次打开后才渲染 -->
    <el-dialog title="图片二维码" :visible.sync="isShow">
      <canvas ref="qrCode" />
    </el-dialog>
    <Role ref="role" :is-show.sync="show" />
  </div>
</template>

<script>
import { sysuser, sysuserDelete } from '@/api/employees.js'
// 引入需要枚举的数据
import employees from '@/api/constant/employees.js'
import Dialog from '@/views/employees/components/add.vue'
// 导入数据持久化插件
import cookiesJs from 'js-cookie'
// 导入导出表格的插件
import { export_json_to_excel } from '@/vendor/Export2Excel'
// get()获取数据 set()设置数据  remove()删除数据
// 引入时间格式化插件
import moment from 'moment'
// 导入二维码插件
import Qrcode from 'qrcode'
// 导入多选框组件
import Role from './components/role.vue'
export default {
  components: {
    Dialog,
    Role
  },
  // 用过滤器的方法格式化数据---局部过滤器
  // filters: {
  //   formOfEmployment(val) {
  //     const res = employees.hireType.find(item => {
  //       return item.id === val
  //     })
  //     return res ? res.value + 'filter' : '-'
  //   }
  // },
  // 局部自定义指令格式化数据
  directives: {
    enablestate: {
      bind() {},
      inserted(dom, obj, vnode) {
        dom.innerText = vnode.context.getState(obj.value)
      },
      // 跟新后
      componentUpdated(dom, obj, vnode) {
        dom.innerText = vnode.context.getState(obj.value)
      }
    }
  },
  data() {
    return {
      show: false,
      isShow: false,
      defaultImg: require('@/assets/common/head.jpg'),
      list: [{}],
      page: {
        total: 200,
        page: 1,
        // 实现页容量的数据持久化---用cookies实现数据持久化用插件js-cookies
        // 页面初始化的时候就获取先获取本地cokkies里面的,如果没有再使用默认值
        // ps:cookies里获取的值是字符串数据类型,所以要转成数字类型
        size: +cookiesJs.get('size') || 5
      },
      employees
    }
  },
  mounted() {
    this.getEmployeeList()
  },
  methods: {
    // 点击角色按钮显示角色弹框
    // 点击角色的时候，同时调用role组件里面的获取当前点击员工的id并且渲染到页面上

    // -------重点：当子组件要渲染要渲染页面值默认值的时候，必须再父组件点击相对应的员工时传入id获取默认值，
    // 而不能直接在子组件请求默认渲染接口，子组件created中再渲染页面的时候只执行一遍，拿不到点击时员工对应的id值
    role(row) {
      this.show = true
      console.log(row.id)
      this.$refs.role.getRoleInfo(row.id)
    },
    // 点击图片生成二维码
    creatCcode(info) {
      this.isShow = true
      // this.$nextTick表示前面的渲染完成后再执行后面的
      this.$nextTick(() => {
        Qrcode.toCanvas(this.$refs.qrCode, info, {
          width: 300,
          height: 300
        })
      })
    },
    // 点击导出按钮.导出表格的数据
    async exportEvent() {
      // 格式化表头数据
      const header = {
        姓名: 'username', // string	非必须		姓名
        手机号: 'mobile', // string	非必须		手机号
        聘用形式: 'formOfEmployment', // number	非必须		聘用形式
        工号: 'workNumber', // string	非必须		工号
        组织名称: 'departmentName', // string	非必须		组织名称
        入职时间: 'timeOfEntry', // string	非必须		入职时间
        转正时间: 'correctionTime' // string	非必须		转正时间
      }
      // 生成表格的所有数据----把size页容量生成最大值,并且把页码设置为第一页,这样就能把所有数据都导出了
      // 否则的话只能生成第一页数据
      this.page = {
        size: 1000,
        page: 1
      }
      const res = await sysuser(this.page)
      // find返回当前符合值的数据
      res.data.rows.forEach((item1) => {
        const res = employees.hireType.find((item) => {
          return item.id === item1.formOfEmployment
        })
        item1.formOfEmployment = res ? res.value : '-'
        const res2 = employees.workingState.find((item) => {
          return +item.id === item1.enableState
        })
        item1.enableState = res2 ? res2.value : '-'
        item1.correctionTime = moment(item1.correctionTime).format('YYYY-MM-DD')
        item1.timeOfEntry = moment(item1.timeOfEntry).format('YYYY-MM-DD')
      })
      // 在给数据赋值之前进行把数据格式化-----最能优化性能，其他方式是渲染后在格式化数据，浪费性能；但在数据赋值之前格式化数据可以很好优化性能
      // 循环生成的数组对象--生成一个二位数组的值,然而二维数组里每一项数组都对应hearder的值一一对应
      const data = res.data.rows.map((item) => {
        // 根据hearder中的字段生成对应的数据
        return Object.keys(header).map((item2) => {
          return item[header[item2]]
        })
      })
      // 当点击的时候才导入导出表格插件,优化性能
      import('@/vendor/Export2Excel')
        .then((res) => {
          // 导入成功执行的
          // res为导入插件1的两个api方法
          res.export_json_to_excel({
            header: Object.keys(header),
            data,
            filename: '员工信息'
          })
        })
        .catch(() => {
          // 导入失败
        })
    },
    // // 点击导出按钮,导出数据
    // exportEvent() {
    //   export_json_to_excel({
    //     header: ['性名', '转正时间'],
    //     data: [['张三', '李四'], ['2020', '2021']]
    //   })
    // },
    // 点击查看按钮-跳转到详情页面
    toDetail(id) {
      this.$router.push(`employees/detail${id}`)
    },
    // 点击导入按钮,跳转到上传文件页面
    uploadEvend() {
      this.$router.push('employees/components/upload')
    },
    // 点击删除按钮,删除当前行员工信息,提醒用户是否确定删除,删除成功后提示删除成功
    del(id) {
      this.$confirm('您确定要删除此员工吗?', '提示').then(async() => {
        await sysuserDelete(id)
        this.$message.success('删除成功')
        // 刷新页面
        this.page.page = 1
        this.getEmployeeList()
      })
    },
    // 封装自定义指令的方法
    getState(value) {
      const res = employees.workingState.find((item) => {
        return +item.id === value
      })
      return res ? res.value : '-'
    },
    // 新增员工
    addEmployee() {
      import('./components/add.vue').then((res) => {
        console.log(res)
      })
      this.$refs.add.isShow = true
    },
    sizeChange(size) {
      this.page.size = size
      cookiesJs.set('size', size)
      this.page.page = 1
      this.getEmployeeList()
    },
    pageChange(page) {
      this.page.page = page
      this.getEmployeeList()
    },
    // 调用api获取员工列表
    async getEmployeeList() {
      const res = await sysuser(this.page)
      console.log(res)
      // find返回当前符合值的数据
      res.data.rows.forEach((item1) => {
        const res = employees.hireType.find((item) => {
          return item.id === item1.formOfEmployment
        })
        item1.formOfEmployment = res ? res.value : '-'
        const res2 = employees.workingState.find((item) => {
          return +item.id === item1.enableState
        })
        item1.enableState = res2 ? res2.value : '-'
        item1.correctionTime = moment(item1.correctionTime).format('YYYY-MM-DD')
        item1.timeOfEntry = moment(item1.timeOfEntry).format('YYYY-MM-DD')
      })
      // 在给数据赋值之前进行把数据格式化-----最能优化性能，其他方式是渲染后在格式化数据，浪费性能；但在数据赋值之前格式化数据可以很好优化性能

      this.list = res.data.rows
      this.page.total = res.data.total
      // console.log(res)
    }

    // 数据格式化方法
    // 1\table中自带的格式化数据
    // 2\过滤器
    //   2.1局部过滤器
    //   2.2全局过滤器
    // 3\自定义指令
    // 4\在数据返回时,赋值之前把数据进行改变
    // table中自带的格式化数据是属性方法
    // row中表示当前行的数据,column表示当前列当前行的一些数据,cellValue表示当前函数的当前单元格的值,index表示下标索引值,从0开始
    // formatter(row, column, cellValue, index) {
    //   // console.log(row, column, cellValue, index)
    //   // find()返回符合要求的第一项
    //   const res = employees.hireType.find(item => {
    //     return item.id === cellValue
    //   })
    //   // console.log(res)
    //   // 给当前调用此格式化数据单元格返回数据
    //   // 为了防止当前的值为空时,多加了一层判断
    //   return res ? res.value : '-'
    // }
  }
}
</script>

<style lang="scss" scoped>
.employees {
  padding: 15px;
  .top {
    margin-bottom: 15px;
    text-align: right;
  }
  .page {
    text-align: right;
    margin-top: 20px;
  }
  .avatar {
    width: 50px;
    height: 50px;
    object-fit: contain;
  }
}
</style>
